<template>
	<div>
		<div class="top border">
			<p class="p1">
				<img src="../../../assets/ren_grey.png" alt="" />
				<span>系统账号：<span @click="needLogin">{{account}}</span></span>
			</p>
			<p class="p2">
				<img src="../../../assets/card1.png" alt="" />
				<span>供卡余额：<span @click="needLogin">{{money}}</span></span>
				<span class="pur_font" @click="tixian()">我要提现</span>
				<span class="pur_font" @click="toRecord">提现记录</span>
			</p>
		</div>
		<div class="isLogin" v-if="isShow">
			<div class="content">
				<div class="table border">
					<div class="table_title">经营状况</div>
				</div>
				<el-table :data="tableData" style="width: 100%" stripe border :row-class-name="RowClassName">
					<el-table-column align="center" prop="time" label="时间"></el-table-column>
					<el-table-column align="center" prop="data1" label="供货数量"></el-table-column>
					<el-table-column align="center" prop="data2" label="供货金额"></el-table-column>
					<el-table-column align="center" prop="data3" label="结算数量"></el-table-column>
					<el-table-column align="center" prop="data4" label="结算金额"></el-table-column>
					<el-table-column align="center" prop="data5" label="处理中数量"></el-table-column>
					<el-table-column align="center" prop="data6" label="处理中金额"></el-table-column>
					<el-table-column align="center" prop="data7" label="停售数量"></el-table-column>
					<el-table-column align="center" prop="data8" label="停售金额"></el-table-column>
				</el-table>
			</div>
		</div>
		<div class="isNoLogin" v-if="!isShow">
			<div class="content border">
				<el-carousel :interval="3000" trigger="click">
					<el-carousel-item v-for="item in bannerList" :key="item.id">
						<img :src="item.imgsrc"/>
					</el-carousel-item>
				</el-carousel>
			</div>
		</div>
		<div class="bot">
			<div class="bot_left border">
				<div class="scroll-wrap">
					<ul class="scroll-content" :style="{ top }" ref="ul1">
						<li v-for="(item,index) in newsList" :key="index" @click="checkDetail(item)">
							<div>{{item.title}}</div>
							<div>{{item.release_time}}</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="bot_right border">
				<p class="p1">
					<img src="../../../assets/qq.png" alt="" />
					<span class="pur_font">售卡顾问</span>
				</p>
				<p class="p1 p2">
					<img src="../../../assets/qq.png" alt="" />
					<span class="pur_font">商务合作</span>
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	import Public from '../../../until/public';
	import { Banner, Notice, CardList } from '../../../until/getData';
	let moment = require('moment');
	export default {
		data() {
			return {
				isShow: false,
				money: 0,
				account: "0",
				newsList: [],
				activeIndex: 0,				// 滚动的位置
				tableData: [],
				bannerList:[]
			}
		},
		computed: {
			top() {
				return -this.activeIndex * 40 + 'px';
			}
		},
		mounted() {
			let t = setInterval(_ => {
				if(this.newsList.length > 3) {
					if(this.activeIndex < this.newsList.length - 3) {
						this.activeIndex += 1;
					} else {
						this.activeIndex = 0;
					}
				} else {
					clearInterval(t)
				}
			}, 3000);
			if (typeof(Public.JS_Cookie('get', 'userInfo'))!='undefined'||(typeof(this.$store.getters.setInfo)!='undefined')&&(this.$store.getters.setInfo)) {
				this.isShow = true;
				let account = Public.JS_Cookie('get', 'userInfo');
				this.account = account.tel;
				CardList().then(res => {
					if (res.code == '1') {
						this.money = eval(res.user.balance);
					}
				}).catch(err => {
					// console.log(err);
				});
				Banner({state: '10'}).then((res) => {
					if (res.code == '1') {
						// res.msg.reverse();
						res.msg.forEach((item,index) => {
							let Dday = 'D' + (index);
							let obj = {
								time: moment(Public.setTimes(Dday)).format('YYYY-MM-DD'),
								data1: item.total.num,
								data2: item.total.worth,
								data3: item.ok.num,
								data4: item.ok.worth,
								data5: item.ing.num,
								data6: item.ing.worth,
								data7: item.no.num,
								data8: item.no.worth
							}
							this.tableData.push(obj);
						});
					}
				}).catch((err) => {
					// console.log(err);
				});
			} else {
				this.isShow = false;
				this.money = '请登录';
				this.account = '请登录';
				Banner({state: '10'}).then((res) => {
					if (res.code == '1') {
						res.msg.forEach(item => {
							let obj = {};
							obj.id = item.id;
							if (process.env.NODE_ENV == 'development') {
								obj.imgsrc = '/api' + item.pic;
							} else {
								obj.imgsrc = item.pic;
							}
							this.bannerList.push(obj);
						});
					}
				}).catch((err) => {
					// console.log(err);
				});
			};
			Notice('1').then(res => {
				if (res.code == '1') {
					this.newsList = res.list;
				}
			}).catch(err => {
				// console.log(err);
			})
		},
		methods: {
			tixian:function(){
				this.$router.push({
					name: 'cash'
				});
			},
			RowClassName({row, rowIndex}){
				if(rowIndex === 3){
					return 'success-row';
				}
			},
			checkDetail(item){
				this.$router.push({
					name: 'notice_detail',
					params:{
						id: item.id
					}
				});
			},
			needLogin(){
				if (this.account === '请登录' && this.money === '请登录') {
					this.$router.push({
						name: 'accountlogin'
					});
				}
			},
			toRecord(){
				this.$router.push({
					name: 'capital'
				});
			}
		}
	}
</script>
<style scoped>
	.top{
		width: 988px;
		height: 94px;
	}
	.top .p1{
		height: 20px;
		line-height: 20px;
		padding-left: 34px;
		padding-top: 21px;
	}
	.top .p1 img{
		width: 18px;
		height: 19px;
		vertical-align: top;
	}
	.top .p1 span{
		vertical-align: top;
		font-size: 14px;
		cursor: pointer;
	}
	.top .p2{
		height: 16px;
		line-height: 16px;
		padding-left: 34px;
		padding-top: 15px;
	}
	.top .p2 img{
		width: 20px;
		height: 16px;
		vertical-align: top;
	}
	.top .p2 span{
		vertical-align: top;
		font-size: 14px;
		cursor: pointer;
	}
	.top .p1>span,.top .p2>span{
		padding-left: 10px;
	}
	.pur_font{
		margin-left: 10px;
	}
	.pur_font:hover{
		cursor: pointer;
	}
	.isNoLogin .content{
		width: 988px;
		height: 298px;
		margin-top: 10px;
	}
	.isLogin .content{
		width: 990px;
		height: 300px;
		margin-top: 10px;
	}
	.bot{
		width: 990px;
		height: 124px;
		margin-top: 10px;
		display: flex;
	}
	.bot .bot_left{
		width: 648px;
		height: 120px;
		padding: 1px 0;
		margin-right: 10px;
	}
	.bot .bot_right{
		width: 327px;
		height: 122px;
		text-align: center;
	}
	.bot_right .p1{
		height: 20px;
		line-height: 20px;
		padding-top: 35px;
	}
	.bot_right .p2{
		padding-top: 10px;
	}
	.bot_right .p1 img{
		width: 18px;
		height: 19px;
		vertical-align: top;
	}
	.bot_right .p1 span{
		vertical-align: top;
		font-size: 14px;
	}
	.scroll-wrap {
		width: 648px;
		height: 120px;
		overflow: hidden;
	}
	.scroll-content {
		position: relative;
		padding-left: 32px;
		padding-right: 17px;
		transition: top 0.5s;
	}
	.scroll-content li {
		list-style: square;
		line-height: 40px;
		color: #898989;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
	}
	.scroll-content li:hover {
		cursor: pointer;
	}
	/*表格*/
	.table{
		width: 988px;
		height: 46px;
		padding-top: 16px;
		border-bottom: 0;
	}
	.table .table_title{
		width: 94px;
		height: 25px;
		border-left: 3px solid #7b5bc7;
		text-align: center;
		line-height: 25px;
		font-size: 16px;
		margin-left: 20px;
	}
	.el-table .success-row {
    	background: #f0f9eb;
  	}
	/*轮播*/
	.el-carousel__container{
		height: 298px;
	}
	.el-carousel__item img{
		width: 988px;
		height: 298px;
	}
</style>